<template>
	<div>
		<el-divider>
			<i :class="iClass"></i>
		</el-divider>

		<div v-loading="loading" v-if="code">
			<!-- <apiM v-if="power" :apis="apis" :api="apis[apiIndex]" @switchApi="switchApi" @delVer="delVer"></apiM>
			<apiU v-else :apis="apis" :api="apis[apiIndex]" @switchApi="switchApi"></apiU> -->
			<div v-if="power">
				<mHeader :apis="apis" :api="api"></mHeader>
				<mRequest :api='api'></mRequest>
				<mResponse :api='api'></mResponse>
			</div>
			<div v-else>
				<uHeader :apis="apis" :api="api"></uHeader>
				<uRequest :api='api'></uRequest>
				<uResponse :api='api'></uResponse>
			</div>
		</div>
		<div v-else>
			<p>文档出错</p>
		</div>
	</div>
</template>

<script>
	// import apiM from './apiMoudle_m.vue'
	// import apiU from './apiMoudle_u.vue'
	import mHeader from "./manage/header/header.vue";
	import mRequest from './manage/request/request.vue'
	import mResponse from './manage/response/response.vue'
	
	import uHeader from "./user/header/header.vue";
	import uRequest from './user/request/request.vue'
	import uResponse from './user/response/response.vue'
	
	
	
	export default {
		name: "apiMoudle",
		components: {
			// apiM,
			// apiU
			mHeader,mRequest,mResponse,
			uHeader,uRequest,uResponse
		},
		props: {
			power: {
				type: Boolean,
			},
			Nav: {
				type: Object,
			},
		},
		data() {
			return {
				loading: true,
				code: false,
				apis: [],
				apiIndex: 0,
				iClass: "el-icon-tickets",
			};
		},
		computed:{
			api() {
				return this.apis[this.apiIndex]
			}
		},
		methods: {
			update() {
				// 加载
				this.loading = true;
				try {
					this.apis = this.Nav.source.source[this.Nav.Node.data.id];
					for (let i = 0; i < this.apis.length; i++) {
						if (this.apis[i].now) {
							this.apiIndex = i;
							break;
						}
					}
					this.code = true;
				} catch (e) {
					this.code = false;
					this.iClass = "el-icon-document-delete";
				}
				this.loading = false;
			},
			switchApi(index) {
				this.apiIndex = index;
				for (let i = 0; i < this.apis.length; i++) {
					if (i == index) this.apis[i].now = true;
					else this.apis[i].now = false;
				}
			},
			delVer(index) {
				if (this.apiIndex > index) this.apiIndex--;
				this.apis.splice(index, 1);
			},
		},
		created() {
			this.update();
		},
	};
</script>

<style scoped>
</style>

<style>
	.cell {
		display: flex;
		align-items: center;
	}

	.jv-code {
		padding: 0px !important;
	}
</style>
